<template>
  <div>
    <!-- 搜索框和操作按钮区域 -->
    <el-row :gutter="10">
      <el-col :span="6">
        <el-input
          placeholder="请输入用户名搜索"
          v-model="searchKeyword"
          @keyup.enter.native="searchUsers"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="searchUsers">搜索</el-button>
      </el-col>
    </el-row>
    <!-- 用户列表表格 -->
    <el-table
      :data="filteredUsers"
      stripe
      style="width: 100%; margin-top: 25px"
      border
    >
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button size="small" type="primary" @click="editUser(scope.row)"
            >编辑</el-button
          >
          <!-- 删除按钮 -->
          <el-popover
            placement="top"
            title="确认删除？"
            width="160"
            trigger="click"
          >
            <div style="text-align: right; margin: 0">
              <el-button size="mini" @click="$refs.popover.close()"
                >取消</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="deleteUser(scope.row.id)"
                >确定删除</el-button
              >
            </div>
            <el-button slot="reference" size="small" type="danger"
              >删除</el-button
            >
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      users: [
        {
          id: 1,
          username: "Alice",
          gender: "女",
          password: "password1",
          email: "alice@example.com",
          phone: "1234567890",
        },
        {
          id: 2,
          username: "Bob",
          gender: "男",
          password: "password2",
          email: "bob@example.com",
          phone: "0987654321",
        },
        // 更多用户...
      ],
      dialoVisible: false,
      newUser: {},
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter((user) =>
        user.username.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    },
  },
  methods: {
    editUser(user) {
      console.log("编辑:", user);
    },
    resetNewUserForm() {
      this.$refs["newUserForm"].resetFields();
      this.newUser = {};
    },
    deleteUser(userId) {
      console.log(`删除用户ID: ${userId}`);
      // 确认删除逻辑，实际应用中可能需要弹窗确认
      // 从this.users数组中移除相应用户
      this.users = this.users.filter((user) => user.id !== userId);
    },
    searchUsers() {
      // 可以在这里添加额外的搜索逻辑，如调用后端API
      // 当前逻辑直接通过计算属性filteredUsers进行过滤
    },
  },
};
</script>
